//flexible.js源码如下；
(function flexible(window,document){//首先是一个立即执行函数，执行的时候传入参数window,document
 var docEl = document.documentElement //返回文档的root元素，即根元素html
 var dpr = window.devicePixelRatio || 1 //获取设备的dpr，即当前设置下物理像素与虚拟像素的比值


 //调整body标签的fontSize
 //设置默认字体的大小，默认字体的大小继承自body
 function setBodyFontSize(){
     if(document.body){
         document.body.style.fontSize = (12 * dpr) + 'px'
     }else {
         document.addEventListener('DOMContentLoaded',setBodyFontSize)//// 通过监听 DOMContentLoaded 事件，在 <body> 存在时再次调用 setBodyFontSize。
     }
 }
 setBodyFontSize();

 //设置 1rem = viewWidth / 10
 function setRemUnit(){
	 //js获取当前的设备大小：document.document.clientWidth;
	 var clientWidth = docEl.clientWidth;//获取设备的宽度
	 if(!clientWidth) return;
	 if(clientWidth >= 750){ //宽度>750 平板 或者桌面
	     docEl.style.fontSize = "100px" //根元素
	 	
	 }else{
		 // var rem = docEl.clientWidth / 10
		 // docEl.style.fontSize = rem + 'px'
		 
		 //移动端适配
		 //设置：html根元素大小 100设tml大计稿的h小 750设计稿（***根据设计稿变化***）
		 //测试设计稿大小: 测量的值px px转rem 测量的px/100=?rem 直接css里面写 ?tem

         //将屏幕宽度等分为100份，然后以每一份的宽度作为1rem的大小。这样，无论在何种设备和浏览器窗口大小下，1rem的大小都会相对于屏幕宽度保持一致，从而实现响应式布局。
            //如果设计稿的宽度是750px，那么在750px宽度的设备上，1rem就等于7.5px（750px/100）。如果设备的宽度是375px，那么1rem就等于3.75px（375px/100）。
		 docEl.style.fontSize = 100* (docEl.clientWidth/750)+"px";
	 }
    
 }

 setRemUnit();

 //在页面resize或者pageshow重新设置rem
 window.addEventListener('resize',setRemUnit)
 window.addEventListener('pageshow',function(e){
     if(e.persisted){//某些浏览器，重新展示页面时，走的是页面展示缓存
         setRemUnit();
     }
 })

 //检测0.5px的支持，支持则root元素的class有hairlines
 //解决1px在高清屏多像素问题
 if(dpr>= 2){
     var fakeBody = document.createElement('doby');
     var testElement = document.createElement('div');
     testElement.style.border = '.5px solid transparent'
     fakeBody.appendChild(testElement);
     docEl.appendChild(fakeBody);
     if(testElement.offsetHeight === 1){
         docEl.classList.add('hairlines')
     }
     docEl.removeChild(fakeBody)
 }
}(window,document))



// (function flexible(window, document) {
//     var docEl = document.documentElement;//获取文档的根元素 <html>，用于后续设置根元素的字体大小。
//     var dpr = window.devicePixelRatio || 1;//获取设备的设备像素比（devicePixelRatio），如果设备不支持该属性，则默认设备像素比为 1。
       
       //用于设置 <body> 元素的字体大小
//     function setBodyFontSize() {
//       if (document.body) {
//         document.body.style.fontSize = 12 * dpr + 'px';
//       } else {
//         document.addEventListener('DOMContentLoaded', setBodyFontSize);// 通过监听 DOMContentLoaded 事件，在 <body> 存在时再次调用 setBodyFontSize。
//       }
//     }
       
       //用于设置根元素的字体大小，即 rem 单位的大小。
//     function setRemUnit() {
//       var clientWidth = docEl.clientWidth; //首先获取根元素的宽度 clientWidth，
//       if (!clientWidth) return; //如果宽度为 0，则直接返回

         //计算 rem 的大小为 clientWidth / 10，并将根元素的字体大小设置为 rem 像素。
//       var rem = clientWidth / 10;
//       docEl.style.fontSize = rem + 'px';
//     }
  
//     setBodyFontSize();
//     setRemUnit();

       //监听窗口的 resize 事件，当窗口大小发生变化时，重新调用 setRemUnit 函数，动态调整根元素的字体大小
//     window.addEventListener('resize', setRemUnit); 
//    
        //监听窗口的 pageshow 事件，当页面重新展示时，判断是否是从缓存中展示的页面（通过 e.persisted 属性），
        //如果是，则重新调用 setRemUnit 函数，动态调整根元素的字体大小。
//     window.addEventListener('pageshow', function (e) {
//       if (e.persisted) {
//         setRemUnit();
//       }
//     });


       /*
        判断设备像素比是否大于等于 2，如果是，则创建一个测试元素，并设置其边框为 0.5px 的透明边框。然后将测试元素添加到根元素中，
        并通过判断测试元素的高度是否为 1 来检测是否支持 0.5px 的边框。如果支持，则给根元素添加一个名为 hairlines 的 class，
        用于解决高清屏幕下 1px 边框显示模糊的问题。
       */  
//     if (dpr >= 2) {
//       var testElement = document.createElement('div');
//       testElement.style.border = '.5px solid transparent';
//       docEl.appendChild(testElement);
//       if (testElement.offsetHeight === 1) {
//         docEl.classList.add('hairlines');
//       }
//       docEl.removeChild(testElement);
//     }
//   })(window, document);